<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>注册页面</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../../../dist/css/adminlte.min.css">
    <!-- iCheck -->
    <link rel="stylesheet" href="../../../plugins/iCheck/square/blue.css">
    <!-- Google Font: Source Sans Pro -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition register-page">
<div style="width:25%" class="register-box">
    <div class="register-logo">
        <b>案件侦查平台</b>
    </div>

    <div class="card">
        <div class="card-body register-card-body">
            <p class="login-box-msg" style="font-weight:bold;color: #007bff">账号注册</p>

            <form method="post">
                <div class="form-group has-feedback">
                    <span class="fa fa-user form-control-feedback"></span>
                    <input id="account" type="text" class="form-control" placeholder="用户名"
                           onfocus="this.setAttribute('placeholder', '');
           focus();" onblur="if (this.value == ''){this.setAttribute('placeholder', '用户名');
}
               <div class="form-group has-feedback">
                    <span class="fa fa-user form-control-feedback"></span>
                    <input id="name" type="text" class="form-control" placeholder="姓名"
                           onfocus="this.setAttribute('placeholder', '');
           focus();" onblur="if (this.value == ''){this.setAttribute('placeholder', '姓名');
}
           blur();">
                </div>
                <div class="form-group has-feedback">
                    <span class="fa fa-lock form-control-feedback"></span>
                    <input id="password" type="password" class="form-control" placeholder="密码"
                           onfocus="this.setAttribute('placeholder', '');
           focus();" onblur="if (this.value == ''){this.setAttribute('placeholder', '密码');
}
           blur();">
                </div>
                <div class="form-group has-feedback">
                    <span class="fa fa-lock form-control-feedback"></span>
                    <input id="passwordConfirm" type="password" class="form-control" placeholder="确认密码"
                           onfocus="this.setAttribute('placeholder', '');
           focus();" onblur="if (this.value == ''){this.setAttribute('placeholder', '确认密码');
}
           blur();">
                </div>

                <div class="form-group has-feedback">
                    <span class="fa fa-lock form-control-feedback"></span>
                    <select id="area"  name="area" class="form-control">
                        <option value="0">选择辖区</option>
                    </select>
                </div>

                <div style="margin:5px auto" class="col-4">
                    <button type="button" class=" btn btn-primary btn-block btn-flat" onclick="register()">注册</button>
                </div>

                <!-- /.col -->
            </form>


        <!-- /.form-box -->
    </div><!-- /.card -->
</div>

<!-- /.register-box -->

<!-- jQuery -->
<script src="../../../plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="../../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- iCheck -->
<script src="../../../plugins/iCheck/icheck.min.js"></script>
<script>
  $(function () {
    $('input')
      .iCheck({
        checkboxClass: 'icheckbox_square-blue',
        radioClass: 'iradio_square-blue',
        increaseArea: '20%' // optional
      })
      area();
  })
  function area(){
      var user_token = sessionStorage.getItem('user_token')

      console.log(user_token)
      var settings = {
          'async': true,
          'crossDomain': true,
          'url': 'http://127.0.0.1:5744/api/areas/list',
          'method': 'GET',
          'headers': {
              'Authorization': user_token
          }
      }

      var data = []

      $.ajax(settings)
          .done(function (response) {
              if (response.code == '0') {
                  data = resolveData(response)
                  console.log(data);
                  var brandId = $("select[name=area]").val();
                   $("select[name=area]").empty();
                  if(data && data.length != 0) {
                      for (var i = 0; i < data.length; i++) {
                          var option = "<option value=\"" + data[i].id + "\"";
                          option += ">" + data[i].area + "</option>";  //动态添加数据
                          $("select[name=area]").append(option);
                      }
                  }
              } else {

                  alert(response.message)
              }
          })
  }
  function doRegister(form) {
    let settings = {
      'async': true,
      'crossDomain': true,
      'url': 'http://127.0.0.1:5744/api/auth/register',
      'method': 'POST',
      'headers': {},
      'processData': false,
      'contentType': false,
      'mimeType': 'multipart/form-data',
      'data': form
    }

    $.ajax(settings)
      .done(function (response) {
        response = JSON.parse(response)
        if (response.code == '0') {
          alert(response.message)
          // $('#login-form').attr('action', '../admin/index.html')

          window.location.href = 'user.html'

        } else {
          alert(response.message)
        }
      })

  }
  function resolveData(response) {
      return response.data
  }

  function register() {

    let pass = $('#password')
      .val()
    let passConfirm = $('#passwordConfirm')
      .val()


    if (pass == passConfirm) {
      let form = new FormData()
      form.append('account', $('#account')
        .val())
      form.append('agent1name', $('#name')
          .val())
      form.append('password', pass)
      form.append('type', '2')
      form.append('shop_type', '1')
      form.append('area_id', $('#area')
          .val())
      doRegister(form)


    } else {
      alert('两次密码不一致')
    }
  }
</script>
</body>
</html>
